<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Parallax Demo">
    <meta name="viewport" content="width=device-width">

	<title>Parallax Demo - rAF + DOM + Absolute Positions</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
	<link href="css/style.css" rel="stylesheet">
</head>
<body>
	<section id="content">
		<header>
			<h1 id="parallaxing">Parallaxing</h1>
			<h2 id="demosite">Demo Site</h2>
		</header>

		<section id="part-1">
			<header>
				<h3>A title</h3>
			</header>

			<div class="content">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus erat, sit amet volutpat felis. Sed et lectus nisl, id ultricies felis. Vivamus non ante augue, sit amet pellentesque magna. Donec eu dapibus sapien. Morbi in ipsum vel massa hendrerit porttitor. Morbi leo magna, faucibus sed vulputate lacinia, adipiscing a massa. Mauris vitae sem neque, at volutpat nisi. Nullam turpis est, porttitor et sagittis ultricies, volutpat sit amet velit. Donec euismod, tellus sit amet commodo molestie, nunc turpis tincidunt tortor, varius consequat massa eros sed ipsum. Morbi eleifend risus sed mauris elementum in ultrices tortor fermentum. Nunc auctor, mi nec tempor facilisis, nunc orci egestas elit, eu aliquet purus eros vitae libero. Aliquam turpis lectus, hendrerit id lobortis at, faucibus eget dui. Praesent ornare massa placerat nulla vestibulum eu pellentesque est adipiscing.
				</p>
				<p>
					Aliquam erat volutpat. Etiam vel felis eget urna pellentesque venenatis eu et nulla.
				</p>
				<p>
					Suspendisse vitae turpis id orci elementum ornare. Proin tempus tortor in velit gravida condimentum. Mauris bibendum nunc quis nibh vulputate egestas. Proin pellentesque, tortor at sodales facilisis, lacus nunc rhoncus felis, a bibendum tortor ante ut massa. Vestibulum interdum posuere feugiat. Morbi pulvinar faucibus pharetra. Nullam nisl massa, consequat sed pellentesque ac, hendrerit at nunc. Curabitur pellentesque est sit amet turpis tempor in venenatis felis hendrerit. Proin dictum molestie consequat.
				</p>
			</div>
		</section>

		<section id="part-2">
			<header>
				<h3>Another title</h3>
			</header>
			<div class="content">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus erat, sit amet volutpat felis. Sed et lectus nisl, id ultricies felis. Vivamus non ante augue, sit amet pellentesque magna. Donec eu dapibus sapien. Morbi in ipsum vel massa hendrerit porttitor. Morbi leo magna, faucibus sed vulputate lacinia, adipiscing a massa. Mauris vitae sem neque, at volutpat nisi. Nullam turpis est, porttitor et sagittis ultricies, volutpat sit amet velit. Donec euismod, tellus sit amet commodo molestie, nunc turpis tincidunt tortor, varius consequat massa eros sed ipsum. Morbi eleifend risus sed mauris elementum in ultrices tortor fermentum. Nunc auctor, mi nec tempor facilisis, nunc orci egestas elit, eu aliquet purus eros vitae libero. Aliquam turpis lectus, hendrerit id lobortis at, faucibus eget dui. Praesent ornare massa placerat nulla vestibulum eu pellentesque est adipiscing.
				</p>
				<p>
					Aliquam erat volutpat. Etiam vel felis eget urna pellentesque venenatis eu et nulla.
				</p>
				<p>
					Suspendisse vitae turpis id orci elementum ornare. Proin tempus tortor in velit gravida condimentum. Mauris bibendum nunc quis nibh vulputate egestas. Proin pellentesque, tortor at sodales facilisis, lacus nunc rhoncus felis, a bibendum tortor ante ut massa. Vestibulum interdum posuere feugiat. Morbi pulvinar faucibus pharetra. Nullam nisl massa, consequat sed pellentesque ac, hendrerit at nunc. Curabitur pellentesque est sit amet turpis tempor in venenatis felis hendrerit. Proin dictum molestie consequat.
				</p>
			</div>
		</section>

		<section id="part-3">
			<header>
				<h3>Final title</h3>
			</header>
			<div class="content">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget purus erat, sit amet volutpat felis. Sed et lectus nisl, id ultricies felis. Vivamus non ante augue, sit amet pellentesque magna. Donec eu dapibus sapien. Morbi in ipsum vel massa hendrerit porttitor. Morbi leo magna, faucibus sed vulputate lacinia, adipiscing a massa. Mauris vitae sem neque, at volutpat nisi. Nullam turpis est, porttitor et sagittis ultricies, volutpat sit amet velit. Donec euismod, tellus sit amet commodo molestie, nunc turpis tincidunt tortor, varius consequat massa eros sed ipsum. Morbi eleifend risus sed mauris elementum in ultrices tortor fermentum. Nunc auctor, mi nec tempor facilisis, nunc orci egestas elit, eu aliquet purus eros vitae libero. Aliquam turpis lectus, hendrerit id lobortis at, faucibus eget dui. Praesent ornare massa placerat nulla vestibulum eu pellentesque est adipiscing.
				</p>
				<p>
					Aliquam erat volutpat. Etiam vel felis eget urna pellentesque venenatis eu et nulla.
				</p>
				<p>
					Suspendisse vitae turpis id orci elementum ornare. Proin tempus tortor in velit gravida condimentum. Mauris bibendum nunc quis nibh vulputate egestas. Proin pellentesque, tortor at sodales facilisis, lacus nunc rhoncus felis, a bibendum tortor ante ut massa. Vestibulum interdum posuere feugiat. Morbi pulvinar faucibus pharetra. Nullam nisl massa, consequat sed pellentesque ac, hendrerit at nunc. Curabitur pellentesque est sit amet turpis tempor in venenatis felis hendrerit. Proin dictum molestie consequat.
				</p>
			</div>
		</section>

		<div id="blob-container">
			<img id="blob-1" src="../images/blob-1.png" />
			<img id="blob-2" src="../images/blob-2.png" />
			<img id="blob-3" src="../images/blob-3.png" />
			<img id="blob-4" src="../images/blob-4.png" />
			<img id="blob-5" src="../images/blob-5.png" />
			<img id="blob-6" src="../images/blob-6.png" />
			<img id="blob-7" src="../images/blob-7.png" />
			<img id="blob-8" src="../images/blob-8.png" />
			<img id="blob-9" src="../images/blob-9.png" />
		</div>
	</section>

	<script src="scripts/parallax.js"></script>
</body>
</html>
